<!--表详细信息-->
<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" >
    <el-tab-pane label="详细信息" name="first" style="font-size: 40px;">
     <tableInfoDetail ref="tableInfoDetail"/>
    </el-tab-pane>
    <el-tab-pane label="血缘关系" name="second" label-width="200px" style="font-size: 40px;">
      <lineage ref="lineage"/>
    </el-tab-pane>
    <el-tab-pane label="任务信息" name="third">
      <scheduleInfo ref="scheduleInfo"/>
    </el-tab-pane>
  </el-tabs>
</template>
<script>

//详细信息
import tableInfoDetail from '@/views/assets/tableInfoDetail'
//血缘详情
import lineage from '@/views/assets/lineage'
//任务详情
import scheduleInfo from '@/views/assets/scheduleInfo'

import tableInfoApi from '@/api/assets/tableInfo'

export function isSpace(str) {
  const reg = /(^\s+)|(\s+$)|\s+/g
  return reg.test(str)
}

export default {
  components: {
    lineage,scheduleInfo,tableInfoDetail
  },
  data() {
    return {
      tableName:this.$route.query.tableName,
      activeName:'first'
    };
  },
  created() {
    this.getTableInfoByName()
  },
  mounted(){

    window.addEventListener('hashchange',()=>{

      var currentPath = window.location.hash.slice(1); // 获取输入的路由

      if(this.$router.path !== currentPath){

        this.$router.push(currentPath); // 动态跳转

      }

    },false);

  },
  methods: {

    // 加载banner列表数据
    init() {
        this.$refs.tableInfoDetail.init(this.tableName)
    },
    // 获得Tasktag列表
    getTableInfoByName() {
      tableInfoApi.getTableInfoByName(this.tableName).then(response => {
        console.log("----"+this.$refs.tableInfoDetail.$data.dataForm)
        this.$refs.tableInfoDetail.$data.dataForm=response.data
        this.dataForm = response.data
      })
    },


    handleClick(tab, event) {
      if(tab.index == 0 ){
        this.$refs.tableInfoDetail.init(this.tableName)
      }else if (tab.index == 1){
        this.$refs.lineage.init(this.tableName)
      }else if (tab.index == 2) {
        this.$refs.scheduleInfo.init(this.tableName)
      }
      console.log(tab, event);
    }
  }
};
</script>
<style >



</style>
